import React, { Component } from 'react';
import {
  Row,
  Col,
  Card,
  List,
  Avatar,
  Button,
  Form,
  Popconfirm,
  Divider,
  Modal,
  Slider,
  InputNumber,
  Collapse,
  Icon,
  message,
  Select,
  Timeline,
  Input,
} from 'antd';
import Link from 'umi/link';
import { formatMessage } from 'umi/locale';
import { connect } from 'dva';
import ConfigParamsForm from './hdForms/ConfigParamsForm';

import { Stage, Layer, Text, Image, Line, Label, Tag, Rect } from 'react-konva';

@connect(({ produce }) => ({ produce }))
@Form.create()
class HdSettings extends Component {
  constructor(props) {
    super(props);
  }
  state = {};
  callback = key => {
    //如果是裁切机参数被展开
    if (key[key.length - 1] == '2') {
      console.log(`key = ${key}`);
      const { dispatch } = this.props;
      dispatch({
        type: 'produce/getZmcParams',
      });
    }
    if (key[key.length - 1] == '1') {
      console.log(`key = ${key}`);
      const { dispatch } = this.props;
      dispatch({
        type: 'produce/getConfigParams',
      });
    }
  };
  saveGetImage = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/saveGetImage',
    });
  };
  openImageLocation = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'produce/openImageLocation',
    });
  };

  render() {
    const Panel = Collapse.Panel;
    const { configParams } = this.props.produce;

    return (
      <Collapse onChange={this.callback}>
        <Panel header="作业参数设置" key="1">
          <ConfigParamsForm configParams={configParams} />
        </Panel>
        <Panel header="获取标定图片" key="2">
          <Card>
            <Button onClick={this.saveGetImage} style={{ marginLeft: 10, marginRight: 10 }}>
              抓取图片
            </Button>
            <Button onClick={this.openImageLocation} style={{ marginLeft: 10, marginRight: 10 }}>
              打开图片目录
            </Button>
          </Card>
        </Panel>
      </Collapse>
    );
  }
}
export default HdSettings;
